<template>
    <el-dialog id="SendEmailMessage" title="发送邮件" :visible.sync="dialogshow" :before-close="dialogClose"  style="display:none;">
        <el-form size="mini" :model="Sendmssages" label-width="100px">
            <el-form-item label="发件人" prop="customercate">
                <el-select v-model="Sendmssages.customercate" filterable style="width:100%;">
                    <el-option v-for="item in customerstaffs" :label="item.typename" :key="item.id"
                               :value="item.typename"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="收件人" prop="creditrank">
                <el-select v-model="Sendmssages.creditrank" filterable style="width:100%;">
                    <el-option v-for="item in changeReason" :label="item.typename"  :key="item.id"
                               :value="item.typename"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="抄送人" prop="customercate">
                <el-select v-model="Sendmssages.customercate" filterable style="width:100%;">
                    <el-option v-for="item in customerstaffs" :label="item.typename"  :key="item.id"
                               :value="item.typename"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="标题" prop="name">
                <el-input v-model="Sendmssages.name" class="clientName"></el-input>
            </el-form-item>

            <el-form-item label="模版选择" prop="creditrank">
                <el-select v-model="Sendmssages.creditrank" filterable style="width:100%;">
                    <el-option v-for="item in changeReason" :label="item.typename"  :key="item.id"
                               :value="item.typename"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="内容" prop="name">
                <el-input v-model="Sendmssages.name" class="clientName"></el-input>
            </el-form-item>

            <el-form-item>
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button size="small" type="primary">添加附件</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogClose">取 消</el-button>
            <el-button type="primary" @click="dialogAdd">确定发送</el-button>
        </div>
    </el-dialog>
</template>

<style>

</style>

<script>
  module.exports = {
    methods:{
      dialogAdd(){
        this.$confirm('是否继续操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      dialogClose(){
        this.$emit('dialog_close',1)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    },
    props: ['dialogshow'],
    data (){
      return {
        fileList: [
          {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
          {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],

        // dialogshow:false,
        Sendmssages:{
          address:'',
          customercate:'',
          nickname:'',
          creditrank:'',
          name:'',
        },
        customerstaffs:[
          { typename: '员工一',
          id:1,
           },
          { typename: '员工二',
          id:2, },
          { typename: '员工三',
          id:3, },
          { typename: '员工四',
          id:4, },
        ],
        changeReason:[
          { typename: '原因一',
          id:1, },
          { typename: '原因二',
          id:2, },
          { typename: '原因三',
          id:3, },
          { typename: '原因四',
          id:4, },
        ]
      }
    }
  }
</script>
